<template>
	<div class="w-h-100 pos-r flex-1" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex" style="box-sizing: border-box; padding: 6px">
			<div style="box-sizing: border-box">
				<v-search :search-arr="searchObjArr" @submit="searchHandle" v-if="dicStatusList?.length">
				</v-search>
			</div>
			<div style="box-sizing: border-box; margin-top: 8px" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="hover">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100" style="">
                                    
									<el-table :data="list" border class="w-h-100" v-loading="loading">
										<el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
										<el-table-column prop="phoneNumbers" label="手机号" align="center"/>
										<el-table-column prop="validateCode" label="短信验证码" align="center" :showOverflowTooltip="true" />
										<el-table-column prop="templateCode" label="短信模板ID" align="center"/>
										<el-table-column prop="status" label="发送状态" align="center"/>
										<el-table-column prop="source" label="来源" align="center"/>
										<el-table-column prop="invalidTime" label="失效时间" align="center"/>
										
										<el-table-column prop="status" label="状态" align="center">
											<template #default="scope">
												<!-- {{ getStatusVal(scope.row.status ) }} -->
											</template>
										</el-table-column>
										
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import getTableData from '/@/utils/getTableData'
import request from '/@/api/develop/ms'
import VSearch from '/@/components/search/v-search.vue';
export default defineComponent({
    components: {
        VSearch,
    },
	setup() {
		type DicStatusType = {
			code: string;
			value: string;
		}

		const dicStatusList = ref<DicStatusType[]>()


		// 搜索关键字
		const searchObj = reactive({
			phoneNumbers: '',
			status: '',
			source: '',
		})

        const searchObjArr: any[] = [
			{
				label: '手机号',
				key: 'phoneNumbers',
				slot: null,
				type: 'input',
				value: '',
			},
			{
				label: '发送状态',
				key: 'status',
				slot: null,
				type: 'select',
				value: '',
			},{
				label: '来源',
				key: 'source',
				slot: null,
				type: 'select',
				value: '',
                option: [],
			},
		];

        let tableDataObj = getTableData(request.getMSList, {}, searchObj, true, false)
        
        // 搜索
		const searchHandle = (params: any) => {
			searchObj.source = params.source;
			searchObj.status = params.status;
			searchObj.phoneNumbers = params.phoneNumbers;
			tableDataObj.searchHandle();
		};

		


		// 获取字典状态列表
		const getSysDictTypeDropDown = async () => {
			let res = await request.sysDictTypeDropDown<DicStatusType[]>({ code: 'sms_send_source' })
            let res_01 = await request.sysDictTypeDropDown<DicStatusType[]>({ code: 'send_type' })
			dicStatusList.value = res.data
            let choiseList = res.data.map( item => {
                return {
                    label: item.value,
                    value: item.code
                }
            })
            let choiseList_01 = res_01.data.map( item => {
                return {
                    label: item.value,
                    value: item.code
                }
            })
            searchObjArr[2].option = [{label: '全部', value: ''},...choiseList]
            searchObjArr[1].option = [{label: '全部', value: ''},...choiseList_01]

		}

		// 获取对应的状态值
		const getStatusVal = (status: string | number) => {
			let filterArr = dicStatusList.value?.filter( item => {
				return item.code == status
			})
			return filterArr?.[0]?.value || ''
		}


		onMounted( () => {
			getSysDictTypeDropDown()
		})

		
        return {
            ...tableDataObj,
            ...toRefs(searchObj),
            searchObjArr,
			searchHandle,
			getStatusVal,
            dicStatusList,
        }
	},
});
</script>

<style lang="scss" scoped>
    :deep(.el-card__body) {
        height: 100%;
    }
</style>
